require("../../public/css/normalize.css")
require("../../public/css/common.css")


require("./smart_appliance.less")

window.addEventListener("DOMContentLoaded",()=>{
           
    //1.获取到需要操作的元素
    let oHour = document.querySelector(".hours");
    let oMinute = document.querySelector(".minute");
    let oSecond = document.querySelector(".second");
    
    //2.获取时间的差值
    let remDate = new Date("2023-11-11 20:00:00");
    setTime(remDate);//设置初始化时间
    //4.利用定时器实现倒计时
    setInterval(function () {
        setTime(remDate);
    }, 1000);
    
     /**
      * 3.将差值设置给元素
      */
     function setTime(remDate) {
         let obj = getDifferTime(remDate);
         oHour.innerText = obj.hour;
         oMinute.innerText = obj.minute;
         oSecond.innerText = obj.second;
     }
    
    
     /**
      * 获得时间差值
      * @param remDate 未来的时间
      * @param curDate 当前的时间
      * @returns {{hour: any | number, day: any | number, minute: any | number, second: any | number}}
      */
     function getDifferTime(remDate, curDate = new Date()) {
         // 1.得到两个时间之间的差值(毫秒)
         let differTime = remDate - curDate;
         // 2.得到两个时间之间的差值(秒)
         let differSecond = differTime / 1000;
         // 3.利用相差的总秒数 / 每一天的秒数 = 相差的天数
         let day = Math.floor(differSecond / (60 * 60 * 24));
         day = day >= 10 ? day : "0" + day;
         // 4.利用相差的总秒数 / 小时 % 24;
         let hour = Math.floor(differSecond / (60 * 60) % 24);
         hour = hour >= 10 ? hour : "0" + hour;
         // 5.利用相差的总秒数 / 分钟 % 60;
         let minute = Math.floor(differSecond / 60 % 60);
         minute = minute >= 10 ? minute : "0" + minute;
         // 6.利用相差的总秒数 % 秒数
         let second = Math.floor(differSecond % 60);
         second = second >= 10 ? second : "0" + second;
         return {
             day: day,
             hour: hour,
             minute: minute,
             second: second,
         }
     }
    
})
